<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/template.xhtml">

    <ui:define name="title"><h:outputText value="Maintain Exam Session" /></ui:define>
    <ui:define name="header"><h:outputText value="Maintain Exam Session" /></ui:define>
    
    <ui:define name="content">
        <h:form id="examSessionForm">
            
            <hr/>
            <p:dataTable var="examSession" value="#{examSessionView.examSessions}" rows="10" id="examSessionTable"
                         paginator="false"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15"
                         selection="#{examSessionView.selectedExamSession}" 
                         rowKey="#{examSession.id}"
                         >
                <p:column selectionMode="single" style="width:16px;text-align:center"/>

                <p:column headerText="Exam Session Name">
                    <h:outputText value="#{examSession.name}" />
                </p:column>
                <p:column headerText="Exam Paper Name">
                    <h:outputText value="#{examSession.examPaperId.name}" />
                </p:column>
                <p:column headerText="Date and Time">
                    <h:outputText value="#{examSession.dateTime}" />
                </p:column>
                
                <p:column style="width:32px;text-align: center">
                    <p:commandButton update=":editExamSessionForm" icon="ui-icon-pencil" title="Edit" oncomplete="PF('editExamSessionDialog').show()">
                        <f:setPropertyActionListener value="#{examSession}" target="#{examSessionView.selectedExamSession}" />
                       <p:resetInput target=":editExamSessionForm" />
                   </p:commandButton>
               </p:column>

                <f:facet name="footer">
                    <p:commandButton onclick="PF('newExamSessionDialog').show()" actionListener="#{examSessionView.createBlankExamSession}" value="Create Exam Session" >
                        <p:resetInput target=":examSessionForm" />
                    </p:commandButton>
                    <p:commandButton actionListener="#{examSessionView.deleteExamSession()}" update=":examSessionForm" icon="ui-icon-trash" value="Delete" />
                </f:facet>
            </p:dataTable>
            <hr/>
            
        </h:form>
        
        <p:dialog header="Create New Exam Session" widgetVar="newExamSessionDialog" resizable="false" >
            
            <h:form id="createExamSessionForm">
                <p:panelGrid id="displayNewUser" columns="2" >   
                    <h:outputText value="Exam Session Name:"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.newExamSession.name}" required="true" requiredMessage="Please Enter Exam Session Name." id="name"/>
                        <p:message for="name"/>    
                    </h:panelGroup>
                    <h:outputText value="Exam Paper:"></h:outputText>
                    <h:panelGroup>
                        <h:selectOneMenu id="examPaper" value="#{examSessionView.examPaperId}" title="Exam Paper" required="true" requiredMessage="Please select an exam paper.">
                            <f:selectItems value="#{examSessionView.examPapersAvailableSelectOne}"/>
                    </h:selectOneMenu>
                </h:panelGroup>  
                    <h:outputText value="Date and Time:"></h:outputText>
                    <h:panelGroup>
                        <p:calendar id="datetime" value="#{examSessionView.newExamSession.dateTime}" pattern="dd/MM/yyyy HH:mm" 
                                    required="true" 
                                    requiredMessage="Please enter date and time."/>                        
                        <p:message for="datetime"/>   
                    </h:panelGroup>
                    <h:outputText value="Duration(in minutes):"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.newExamSession.duration}" 
                                     required="true" 
                                     requiredMessage="Please Enter Duration(in minutes)." 
                                     id="duration"/>
                        <p:message for="duration"/>
                    </h:panelGroup>
                    <h:outputText value="Location:"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.newExamSession.location}" required="false" id="location"/>
                        <p:message for="location"/>    
                    </h:panelGroup>
                    <h:outputText value="Deprecated(Y/N):"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.newExamSession.deprecated}" required="false" id="deprecated"/>
                        <p:message for="deprecated"/>    
                    </h:panelGroup>
                </p:panelGrid>
                
                <p:commandButton value="Create" update=":examSessionForm, :examSessionForm "  
                                 oncomplete=" handleSubmitRequest(xhr, status, args, 'newExamSessionDialog','createExamSessionForm');" 
                                 actionListener="#{examSessionView.createExamSession()}"/>
                <p:commandButton type="reset" value="Reset"></p:commandButton>
            </h:form>
            
        </p:dialog>
        
        <p:dialog header="Edit Exam Session" widgetVar="editExamSessionDialog" resizable="false" >
            
            <h:form id="editExamSessionForm">
                <h:inputHidden value="#{examSessionView.selectedExamSession.id}" id="id"/>
                <p:panelGrid id="displayExamSession" columns="2" rendered="#{not empty examSessionView.selectedExamSession}">  
                    
                    <h:outputText value="Exam Session Name:"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.selectedExamSession.name}" id="name"/>
                        <p:message for="name"/>    
                    </h:panelGroup>
                    <h:outputText value="Exam Paper:"></h:outputText>
                    <h:panelGroup>
                        <h:selectOneMenu id="examPaper" value="#{examSessionView.selectedExamSession.examPaperId.id}" title="Exam Paper" required="true" requiredMessage="Please select an exam paper." >
                            <f:selectItems value="#{examSessionView.examPapersAvailableSelectOne}"/>
                        </h:selectOneMenu>
                    </h:panelGroup>
                    <h:outputText value="Date and Time:"></h:outputText>
                    <h:panelGroup>
                        <p:calendar id="datetime" value="#{examSessionView.selectedExamSession.dateTime}" pattern="dd/MM/yyyy HH:mm:ss" 
                                    required="true" 
                                    requiredMessage="Please enter date and time."/>                        
                        <p:message for="datetime"/>   
                    </h:panelGroup>
                    <h:outputText value="Duration(in minutes):"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.selectedExamSession.duration}" 
                                     required="true" 
                                     requiredMessage="Please Enter Duration(in minutes)." 
                                     id="duration"/>
                        <p:message for="duration"/>   
                    </h:panelGroup>
                    <h:outputText value="Location:"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.selectedExamSession.location}" required="false" id="location"/>
                        <p:message for="location"/>    
                    </h:panelGroup>
                    <h:outputText value="Deprecated(Y/N):"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examSessionView.selectedExamSession.deprecated}" required="false" id="deprecated"/>
                        <p:message for="deprecated"/>    
                    </h:panelGroup>
                </p:panelGrid>
                
                <p:commandButton value="Edit" update=":editExamSessionForm, :examSessionForm "  
                                 oncomplete=" handleSubmitRequest(xhr, status, args, 'editExamSessionDialog','editExamSessionForm');" 
                                 actionListener="#{examSessionView.editExamSession()}"/>
                <p:commandButton type="reset" value="Reset"></p:commandButton>
            </h:form>
            
        </p:dialog>
        
        <script type="text/javascript">  
            function handleSubmitRequest(xhr, status, args, dialogName, formName) {  
                    dialog = jQuery('#'+dialogName);
                if(args.validationFailed) {  
                    dialog.effect("shake", { times:3 }, 100);  
                } else {
                    clearForm(formName);
                    PF('newExamSessionDialog').hide(); 
                    PF('editExamSessionDialog').hide(); 
                }  
            }
            function clearForm(formName){
                jQuery('#'+formName).each(function(){
                        this.reset();
                });
            }
        </script> 
</ui:define>

</ui:composition>

